<template>
  <div id="calendar"  class="fixed-bottom">
    <div class="calcontainer">
        <p class="title font18 white">
            <span>{{dateString}}</span>
        </p>
        <ul class="selecttime fs_flex">
            <li class="font24 fs_last" @click="GetDateStr(-1)">前一天</li>
            <li class="text-center font24" @click="GetDateStr(0)">今天</li>
            <li class="text-right font24 fs_next" @click="GetDateStr(1)">后一天</li>
        </ul>

        <ul class="fs_info">
            <li>
                <div class="fs_flex mg_bottom">
                    <span class="fs_flex1 font18">待确认</span>
                    <span class="text-right fs_flex1" @click="gotocalendarinfo('stay')">更多&gt</span>
                </div>

                <div v-for="(item,index) in calendarLists">
                  <div v-if="item.calendarType=='1'">
                    <div v-for="(item1,index1) in item.details">
                      <router-link :to="{path:'/hostOrderDetail',query:{orderId:item1.orderId,calendarType:item.calendarType,parentUrl:'/host'}}" v-show="index1<3">
                      <p>{{index1+1+'.   '}}{{item1.content}}</p>
                      </router-link>
                    </div>
                    <p v-if="!item.details">暂无待确认订单</p>
                  </div>
                </div>
            </li>
            <div class="split20"></div>
            <li>
                <div class="fs_flex mg_bottom">
                    <span class="fs_flex1 font18">入住</span>
                    <span class="text-right fs_flex1" @click="gotocalendarinfo('already')">更多&gt</span>
                </div>
              <div v-for="(item,index) in calendarLists">
                <div v-if="item.calendarType=='2'">
                  <div v-for="(item1,index1) in item.details">
                    <router-link :to="{path:'/hostOrderDetail',query:{orderId:item1.orderId,calendarType:item.calendarType,parentUrl:'/host'}}" v-show="index1<3">
                      <p>{{index1+1+'.   '}}{{item1.content}}</p>
                    </router-link>
                  </div>
                  <p v-if="!item.details">暂无入住订单</p>
                </div>
              </div>
            </li>
            <div class="split20"></div>
            <li>
                <div class="fs_flex mg_bottom">
                    <span class="fs_flex1 font18">退房</span>
                    <span class="text-right fs_flex1" @click="gotocalendarinfo('Evaluated')">更多&gt</span>
                </div>
              <div v-for="(item,index) in calendarLists">
                <div v-if="item.calendarType=='3'">
                  <div v-for="(item1,index1) in item.details">
                    <router-link :to="{path:'/hostOrderDetail',query:{orderId:item1.orderId,calendarType:item.calendarType,parentUrl:'/host'}}" v-show="index1<3">
                      <p>{{index1+1+'.   '}}{{item1.content}}</p>
                    </router-link>
                  </div>
                  <p v-if="!item.details">暂无退房订单</p>
                </div>
              </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import Cal from "../../../assets/js/calendar.js";
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'

    export default {
        name: 'calendar', //组件的名字
        data() {
            return { //数据
                msg: '管家日历',
                dayIndex:0,
                dateString:'',
                reqDateString:''
            }
        },
        methods: { //方法
            ...mapActions(['getCalendar']),
            gotocalendarinfo(billType) {
                this.$router.push({
                    path: '/calendarinfo',
                    query: {billType:billType,dateString:this.reqDateString}
                })
            },
            gotoCalculateLastDays(){
                Cal.CalculateLastDays();
            },
            gotoCalculateNextDays(){
                Cal.CalculateNextDays();
            },
            gotoCalculateToday(){
                Cal.CreateCurrentCalendar(0,0,0);
            },
            calInit(){
                Cal.initialize();
            },

            GetDateStr(AddDayCount){
              this.calendarLists.splice(0,1);
              var that = this;
              var dd = new Date();
              if(0==AddDayCount){//今天
                that.dayIndex =0;
              }
              dd.setDate(dd.getDate()+(that.dayIndex+AddDayCount));//获取AddDayCount天后的日期
              var y = dd.getFullYear();
              var m = dd.getMonth()+1;//获取当前月份的日期
              var d = dd.getDate();
              that.dayIndex=that.dayIndex+AddDayCount;
              if(m<10){
                m='0'+m;
              }
              that.dateString = y+"年  "+m+"月  "+d+"日";
              that.reqDateString = y+"-"+m+"-"+d;
              that.getCalendar(that.reqDateString);
            }
        },
        computed: { //计算 用来引入vuex里面state
           ...mapState(['calendarLists','isGuanjia'])
        },
        mounted: function() { //组件加载完成
            this.calInit();
            this.GetDateStr(0);
        },
        watch: { //健康某个数据变化后触发某个事件
            isGuanjia(curVal,oldVal){
　　　　　　　　　if(!curVal){
                    this.$router.push({
                        path: '/noHostAuth'
                    })
                }
　　　　　　　},
        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }
    }
</script>
<style scoped lang="scss">
    @import '../../../assets/css/pay/calendar.css';
    a{
      color:#5b9bd5;
    }
    .calcontainer{
        width: 90%;
        margin:20px auto 0;
        border-bottom: 80px solid transparent;
        .title{
            text-align: center;
            height: 60px;
            line-height: 60px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            color: #666;
            border: 1px solid #999;
        }
        .selecttime{
            margin:20px 0;
            li{
                flex:1;
                color:#666;
                margin:0 10px;
            }
        }
        .fs_info{
            box-sizing: border-box;
            font-size:16px;
            li{
                width: 100%;
                border: 1px solid #999;
                padding: 16px 10px;
                color:#666;
                .mg_bottom{
                    margin-bottom: 10px;
                }
            }
        }

    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
